<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            height: 300px;
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
            text-align: center;
        }
        h1{
            margin-top: 20px;
        }
        h2{
            margin-top: 20px;
        }
        h3{
            margin-top: 20px;
        }
        div h1{
            color: rgb(0, 213, 255);
        }
        div h2{
            color: rgb(65, 50, 139);
        }
        div>h3{
            color: rgb(217, 15, 15);
        }

    </style>
</head>
<body>
    <div>
        <h1 style="text-align: center;">摸鱼儿·雁丘词</h1>
        <h2 style="text-align: right;">-元好问</h2>
        <h3>问世间情为何物，直教生死相许？</h3>
        <h3>天南地北双飞客，老翅几回寒暑。</h3>
        <h3>欢乐趣，离别苦，就中更有痴儿女。</h3>
        <label for="checkbox">
            <input type="checkbox" id="checkbox">
            <span>已背</span>
        </label>
    </div>
</body>
</html>